import { FC } from 'react';
import { observer } from 'mobx-react-lite';
import { useVM } from '@todo/ui';
import { UserViewModel } from '../../viewmodels/user.vm.ts';
import Dropdown from '@mui/joy/Dropdown';
import MenuButton from '@mui/joy/MenuButton';
import Avatar from '@mui/joy/Avatar';
import Skeleton from '@mui/joy/Skeleton';
import Menu from '@mui/joy/Menu';
import MenuItem from '@mui/joy/MenuItem';

const HeaderUserMenu: FC = () => {
  const vm = useVM<UserViewModel>(UserViewModel);

  const logOutHandler = () => {
    vm.userLogout();
  };

  return (
    <Dropdown>
      <MenuButton
        variant="plain"
        size="sm"
        slots={{ root: Avatar }}
        slotProps={{
          root: {
            size: 'md',
            color: 'primary',
            sx: { cursor: 'pointer', ml: 1 },
          },
        }}
        loading={vm.loading}
      >
        {vm.userInitials}
        <Skeleton loading={vm.loading} />
      </MenuButton>
      <Menu>
        <MenuItem onClick={logOutHandler}>Logout</MenuItem>
      </Menu>
    </Dropdown>
  );
};

export default observer(HeaderUserMenu);
